body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background-color: green;
  /* flex-direction: column; */
}
.radius {
  border-radius: 50%;
}
.flexC {
  display: flex;
  justify-content: center;
  align-items: center;
}
.clock {
  width: 350px;
  height: 350px;
  background-color: tan;
}
.pan {
  width: 300px;
  height: 300px;
  background-color: white;
  box-shadow: -3px 3px 10px thistle, 3px -3px 9px thistle;
}
.clocks {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
}
.clock-item {
  position: absolute;
  /*初始位置：顶部中间*/
  top: 0;
  left: 50%;
  margin-left: -4px;
  width: 8px;
  height: 24px;
  background-color: black;
  color: white;
  display: none;
}
.show {
  display: block;
}
/*从第二个开始，角度是30度，位置可以通过三角函数求出但我懒得算了已经忘光了所以...*/
/* 以第一个为原点
   rotate = (i-1)*30 
   translate(x,y)
*/
/*12、3、6、9这几个位置的点确定，translate的值记得看情况减去它们宽高的一半/全部*/
/*3点*/
.clock-item:nth-child(4) {
  transform: rotate(90deg) translate(138px, -138px); /*150,-150*/
}
/*6点*/
.clock-item:nth-child(7) {
  transform: rotate(180deg) translate(-4px, -276px); /*0,-300*/
}
/*9点*/
.clock-item:nth-child(10) {
  transform: rotate(270deg) translate(-138px, -138px); /*-150,-150*/
}
.point {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: black;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.long {
  position: absolute;
  background-color: tomato;
  width: 8px;
  height: 80px;
  top: 50%;
  margin-top: -80px;
  left: 50%;
  margin-left: -4px;
  z-index: 3;
  transform-origin: bottom;
  /*   transition: all 0.5s; */
  /* transition-time-function: cubic-bezier(0.8, 0.9, 1, 1); */
}
.sec {
  width: 4px;
  height: 120px;
  margin-top: -120px;
  margin-left: -2px;
  /*  transform: rotate(90deg); */
}
.min {
  width: 6px;
  height: 100px;
  margin-top: -100px;
  margin-left: -3px;
  /*  transform: rotate(180deg); */
}
